<div class="animated fadeIn">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-align-justify"></i> 系统用户
                </div>
                <div class="card-body">

                    <div class="layui-btn-group userTable">
                        <button class="addMemberDialogModal layui-btn layui-btn-sm"
                                type="button"
                                data-toggle="modal"
                                data-target="#addMemberDialogModal">
                            <i class="fas fa-user-plus" aria-hidden="true"></i> 添加成员
                        </button>
                        <button class="layui-btn layui-btn-sm" data-type="batchAddGroup">
                            <i class="fas fa-users"></i> <i class="fas fa-plus-circle"></i> 加入组
                        </button>
                        <button class="layui-btn layui-btn-sm layui-btn-danger" data-type="batchRemoveGroup">
                            <i class="fas fa-users"></i> <i class="fas fa-minus-circle"></i> 移除组
                        </button>
                    </div>

                    <table class="layui-table" id="LAY_table_user" lay-filter="userTable">
                    </table>

                    <script type="text/html" id="userOpsBar">
                        <div class="layui-btn-group">
                            <button class="layui-btn layui-btn-sm" lay-event="detail">
                                <i class="fas fa-info-circle" title="查看用户详细信息"></i>
                            </button>
                            <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="edit">
                                <i class="fas fa-edit" title="修改用户信息"></i>
                            </button>
                            <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="auth">
                                <i class="fas fa-user-secret" title="授权角色"></i>
                            </button>
                            <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">
                                <i class="fas fa-trash-alt" title="删除用户"></i>
                            </button>
                        </div>
                    </script>

                    <!-- 模态框 -->
                    <div class="modal fade" id="addMemberDialogModal">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">

                                <!-- 模态框头部 -->
                                <div class="modal-header">
                                    <h4 class="modal-title" id="modal-title">人员信息</h4>
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                </div>

                                <!-- 模态框主体 -->
                                <div class="modal-body">
                                    <div class="table-responsive" style="text-align: center">
                                        <form class="form-horizontal" method="POST" th:action="@{'users/save'}">
                                            <table class="table table-hover">
                                                <tr>
                                                    <td align="right">登录用户名:</td>
                                                    <td>
                                                        <div class="template-input-icon-container">
                                                            <i class="fas fa-user"></i>
                                                            <input type="text" class="form-control"
                                                                   placeholder="登录用户名"
                                                                   required="required"
                                                                   id="username" name="username"/>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td align="right">显示用户名:</td>
                                                    <td>
                                                        <div class="template-input-icon-container">
                                                            <i class="fas fa-id-card"></i>
                                                            <input type="text" class="form-control"
                                                                   placeholder="显示用户名"
                                                                   required="required"
                                                                   id="displayName" name="displayName"/>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td align="right">职称:</td>
                                                    <td>
                                                        <div class="template-input-icon-container">
                                                            <i class="fas fa-id-card"></i>
                                                            <input type="text" class="form-control"
                                                                   placeholder="职称"
                                                                   required="required"
                                                                   id="user-title" name="title"/>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td align="right">用户邮箱:</td>
                                                    <td>
                                                        <div class="template-input-icon-container">
                                                            <i class="fas fa-at"></i>
                                                            <input type="text" class="form-control"
                                                                   placeholder="用户邮箱"
                                                                   required="required"
                                                                   id="email-address" name="email"/>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td align="right">密 码:</td>
                                                    <td>
                                                        <div class="template-input-icon-container">
                                                            <i class="fas fa-lock"></i>
                                                            <input type="password" class="form-control"
                                                                   placeholder="密码"
                                                                   required="required"
                                                                   id="password" name="password"/>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td align="right">用户组:</td>
                                                    <td>
                                                        <div class="template-input-icon-container">
                                                            <i class="fas fa-users"></i>
                                                            <input type="text" class="form-control"
                                                                   placeholder="用户组" required="required"
                                                                   id="userGroup" name="userGroup"/>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td align="right">用户类别:</td>
                                                    <td>
                                                        <select id="userType" name="userType"
                                                                class="select custom-select">
                                                            <option th:each="entry : ${userAuthorityMap}"
                                                                    th:value="${entry.key}"
                                                                    th:text="${entry.value}">用户类别
                                                            </option>
                                                        </select>
                                                    </td>
                                                </tr>
                                            </table>
                                            <input type="submit" value="保存" class="btn btn-success"/>
                                        </form>
                                    </div>
                                </div>
                                <!-- 模态框底部 -->
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭
                                    </button>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--/.row-->
        </div>
    </div>
</div>

<script th:inline="javascript">
    layui.use('table', function () {
        var table = layui.table;
        var opt = {
            elem: '#LAY_table_user',
            id: 'user-data',
            url: '/api/user/list',
            height: '520',
            cellMinWidth: 120,
            page: true, //开启分页,
            limit: 10,
            limits: [10, 50, 100, 200],
            cols: [
                [
                    {type: 'checkbox'},
                    {field: 'id', title: 'ID'},
                    {field: 'username', title: '用户名',  width: 160},
                    {field: 'displayName', title: '显示名', edit: 'text', width: 160},
                    {field: 'title', title: '职称', edit: 'text', width: 160},
                    {
                        field: 'avatarId',
                        title: '头像',
                        align: 'center',
                        width: 80,
                        templet: '#avatarTpl'
                    },
                    {field: 'email', title: '邮箱', edit: 'text'},
                    {field: 'groups', title: '用户组'},
                    {
                        title: '操作',
                        width: 200,
                        align: 'center',
                        toolbar: '#userOpsBar'
                    }
                ]
            ],
            done: function (res, curr, count) {
                $("[data-field='id']").css('display', 'none');
            }
        };
        //方法级渲染
        table.render(opt);

        //监听表格复选框选择
        table.on('checkbox(userTable)', function (obj) {
            console.log(obj)
        });

        table.on('edit(userTable)', function (obj) {
            var value = obj.value, //得到修改后的值
                data = obj.data, //得到所在行所有键值
                field = obj.field; //得到字段
            $.ajax({
                type: "POST",
                url: "/api/user/update/" + field,
                contentType: 'application/json; charset=utf-8',
                data: JSON.stringify(data), //可选参数
                dataType: "json",
                success: function (resp) {
                    console.log(resp);
                    layer.msg('用户信息更新成功！');
                    //reloadUserTable('/api/user/list');
                }
            });
        });

        //监听工具条
        table.on('tool(userTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.msg('用户ID号：' + data.id + ' 显示名称：' + data.title+'  角色：'+data.authorities);
            } else if (obj.event === 'del') {
                layer.confirm('真的删除用户: ' + data.username + ' 吗？', {title: "删除确认"}, function (index) {
                    $.ajax({
                        type: "POST",
                        url: "/api/user/delete",
                        contentType: 'application/json; charset=utf-8',
                        data: data.id, //可选参数
                        dataType: "json",
                        success: function (value) {
                            console.log(value);
                            var result = JSON.parse(value);
                            if (result == true) {
                                layer.alert('用户' + data.username + '删除成功!', {
                                    icon: 6, btn: ['确认'], yes: function (index) {
                                        obj.del();
                                        layer.close(index);
                                        var tableIns = table.render(opt);
                                        tableIns.reload();
                                    }
                                });
                            } else {
                                layer.alert("用户删除失败!", {icon: 2});
                            }
                            layer.close(index);
                        }
                    });
                });

            } else if (obj.event === 'edit') {
                layer.alert('用户详细数据：<br>' + JSON.stringify(data))
            } else if (obj.event === 'auth') {
                layer.open({
                    type: 2,
                    title: '管理授权',
                    area: ['560px', '720px'],
                    resize: false,
                    content: 'users/auth?id=' + data.id,
                    zIndex: layer.zIndex,
                    success: function (layero) {
                        layer.setTop(layero);
                    }
                });
            }
        });

        var $ = layui.$, active = {
            batchAddGroup: function () {
                var checkStatus = table.checkStatus('user-data')
                    , data = checkStatus.data;
                //layer.alert(JSON.stringify(data));
                console.log(data);
                if (data.length == 0) {
                    layer.msg('请选择待加入组的用户！');
                } else {
                    postGroupService('/api/user/addGroup', data);
                }
            },
            batchRemoveGroup: function () {
                var checkStatus = table.checkStatus('user-data')
                    , data = checkStatus.data;
                //layer.alert(JSON.stringify(data));
                console.log(data);
                if (data.length == 0) {
                    layer.msg('请选择待移除组的用户！');
                } else {
                    postGroupService('/api/user/removeGroup', data);
                }
            }

        };

        $('.userTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        function postGroupService(url, postData) {
            layer.prompt(
                {
                    title: '请输入组名',
                    success: function (layerInput) {
                        layerInput.find('input').on('keydown', function () {
                            if (event.keyCode === 13) {
                                prompt_service(event.target.value);
                            }
                        })
                    }
                },
                function (value) {
                    prompt_service(value);
                }
            );

            function prompt_service(inputParam) {
                //console.log(JSON.stringify(postData));
                $.ajax({
                    type: "POST",
                    url: url + "?group=" + inputParam,
                    contentType: 'application/json; charset=utf-8',
                    data: JSON.stringify(postData), //可选参数
                    dataType: "json",
                    success: function (value) {
                        console.log(value);
                        reloadUserTable('/api/user/list');
                    }
                });
                layer.closeAll();
            }
        }

        function reloadUserTable(restUrl) {
            table.reload('user-data', {
                url: restUrl,
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        }

    });
</script>

<script type="text/html" id="avatarTpl">
    <div style="align:center;">
        <img src="file/preview/{{ d.avatarId}}"
             style="width:32px; height:32px;border-radius:32px">
    </div>
</script>
<style type="text/css">
    .layui-table-cell {
        height: 36px;
        line-height: 36px;
    }
</style>